<script src = 'https://cs.tru.ca/~mlee/T3PO/t3po_rev3.lib.js'></script>
<p>
Number: <input id='ix'></input><br>
Number: <input id='iy'></input><br>
Sum: <span id='ox'></span>
</p>
<button id='tr1-button'>Add 5 to the first number</button>
<script>
var models = {'x':{initial:3}, 'y':{tojs:updated}};
var inputs = [{id:'ix', model:['x'], event:['keyup']}, {id:'iy', model:['y']}];
var outputs = [{id:'ox', model:['x','y'], expr:"'The sum is ' + (Number(T3PO.x) + Number(T3PO.y)) + '.'"}];
var t3po = new Tru3PO(models, inputs, outputs);
// for testing
$('#tr1-button').click(function() {
t3po.update('x', Number(t3po.get('x')) + 5); // from-data-to-view binding
});
function updated() { alert('The model, iy, is updated.'); } // from-view-to-data binding
</script>
Trial 1: Let's try the above example, with the followings.